<New::Form
  @taskIsRunning={{this.docIsBeingCreated}}
  @icon={{or this.docTypeIcon "file-text"}}
  @headline="Create your {{@docType}}"
  @buttonIsActive={{this.buttonIsActive}}
  @taskIsRunningHeadline="Creating draft in Google Drive..."
  @taskIsRunningDescription="This usually takes 10-20 seconds."
  @buttonText="Create draft in Google Drive"
  {{did-insert this.registerForm}}
  {{on "submit" this.submit}}
  data-test-new-doc-form
>
  {{! Title }}
  <Hds::Form::Textarea::Field
    {{auto-height-textarea}}
    {{autofocus}}
    data-test-title-input
    @value={{this.title}}
    class="px-2.5"
    placeholder="Enter a title"
    name="title"
    {{on "keydown" this.onKeydown}}
    as |F|
  >
    <F.Label @isRequired={{true}}>Title</F.Label>
    {{#if this.formErrors.title}}
      <F.Error data-test-title-error>
        {{this.formErrors.title}}
      </F.Error>
    {{/if}}
  </Hds::Form::Textarea::Field>

  {{! Summary }}
  <div>
    <div class="flex gap-2.5">
      <Hds::Form::Label>Summary</Hds::Form::Label>
      {{#if this.summaryIsLong}}
        <span
          data-test-summary-warning
          class="mt-px text-body-100 text-color-foreground-warning"
        >
          Limit this to 1 or 2 sentences if possible.
        </span>
      {{/if}}
    </div>
    <Hds::Form::Textarea::Field
      data-test-summary-input
      @value={{this.summary}}
      rows="3"
      name="summary"
      class="mt-2 px-2.5 py-2 placeholder-color-palette-neutral-400"
      placeholder="One or two sentences outlining your doc."
      {{on "keydown" this.onKeydown}}
    />
  </div>

  {{! Product/area }}
  <div>
    <Hds::Form::Label
      class="mb-2 flex"
      @controlId="product-select"
      @isRequired={{true}}
    >
      Product/Area
    </Hds::Form::Label>
    <Inputs::ProductSelect
      @selected={{this.productArea}}
      @onChange={{this.onProductSelect}}
      @offset={{(hash mainAxis=0 crossAxis=-3)}}
      @matchAnchorWidth={{hash enabled=true additionalWidth=6}}
      class="max-h-[240px]"
    />
    {{#if this.formErrors.productAbbreviation}}
      <Hds::Form::Error data-test-product-error class="mt-2">
        {{this.formErrors.productAbbreviation}}
      </Hds::Form::Error>
    {{/if}}
  </div>

  {{! Contributors }}
  <Hds::Form::Field @layout="vertical" as |F|>
    <F.Control>
      <Inputs::PeopleSelect
        class="multiselect w-full"
        @selected={{this.contributors}}
        @onChange={{this.updateContributors}}
      />
    </F.Control>
    <F.Label class="flex items-center gap-1.5">
      Contributors
      <TooltipIcon
        @text="People to share your doc with. You can always add more later."
      />
    </F.Label>
  </Hds::Form::Field>
</New::Form>
